<template>
	<view class="mph100 bf ">
		<view class="table_h fixed_top plr30 ft26 tac">
			<view class="table_th bd">
				<view class="table_td  bdr">押金金额</view>
				<!-- <view class="table_td  bdr">剩余金额</view> -->
				<view class="table_td  bdr">押金类型</view>
				<view class="table_td  bdr" style="width: 160upx;">订单编号</view>
				<view class="table_td  bdr">订单状态</view>
				<view class="table_td" style="width: 140upx;">操作</view>
			</view>
		</view>
		<view class="" style="height: 900upx;overflow: hidden;overflow-y: auto;">
			<view class="table_w plr30 pt70 pb140 tac">
				<view class="table_b bd">
					<block v-for="item in loadList" :key="item.id">
						<view class="table_tr" style="display: flex;justify-content: center;align-items: center;">
							<view class="table_td ptb20 bdr">{{ item.money }}元</view>
							<!-- <view class="table_td ptb20 bdr">800元</view> -->
							<view class="table_td ptb20 bdr">{{ item.bt_type || '租车押金' }}</view>
							<view class="table_td ptb20 bdr" style="width: 160upx;">{{ item.order_no || '--' }}</view>
							<view class="table_td ptb20 bdr">
								<text
									:class="item.rent_status == 0 ? 'warning' : item.rent_status == 1 ? 'green' : item.rent_status == 2 ? 'danger' : 'c3'">
									{{
									item.rent_status == 0 ? '租用中' : item.rent_status == 1 ? '已完成' : item.rent_status == 2 ? '退款中' : item.rent_status == 3 ? '已退款' : '--'
								}}
								</text>
							</view>
							<view class="table_td ptb20" style="width: 140upx;">
								<text class="ft22 primary" v-if="item.rent_status == 0"
									@click="goOrderList(item)">查看订单</text>
								<text class="plr10 primary" v-else-if="item.rent_status == 1"
									@click="extractCashFn(item)">提取押金</text>
								<text class="plr10 primary"
									v-else>{{item.rent_status == 2?'审核中':item.rent_status == 3?'提现成功': '--'}}</text>
							</view>
						</view>
					</block>
					<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0">

						<view class="c9 pt20">您还没有押金记录~</view>
					</view>
				</view>
				<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText"
					color="#999"></uni-load-more>
			</view>
		</view>
		<!-- 
		<view class="fixed_bottom ptb30 plr100">
			<u-button type="primary" shape="circle" @click="routerLink({ path: '/pages/user/wallet/setAccount' })">设置提现账户</u-button>
		</view> -->


		<!-- 尾部 -->
		<view style="position: absolute;bottom: 60upx;left: 30upx;right: 30upx;">
			<!-- 提取押金说明 -->
			<view
				style="background-color: #eee;padding: 30upx;border-radius: 20upx;line-height: 56upx;font-size: 28upx;">
				<view>提取押金说明：</view>
				<view>1、提取押金之前，需要先归还电池；</view>
				<view>2、提取押金自动到账；</view>
			</view>
			<!-- 归还电池 -->
			<view style="margin-top: 60upx;" class="plr40 mb30">
				<view>
					<button class="btn-box" @click="returnTheBatteryFn" v-if="isBtn==0">
						扫一扫归还电池
					</button>
					<button class="btn-box" disabled="true" v-else>
						电池已归还
					</button>
				</view>

			</view>
			<!-- 	<u-button type="primary" shape="circle" @click="btn">
				测试
			</u-button> -->
		</view>



	</view>
</template>

<script>
	import loadMore from '@/mixins/loadMore'
	import WS from '@/utils/socket'
	import {
		depositOrder,
		depositWithdraw,
		deviceReturnOpenDoor,
		getMyBattery
	} from '@/api/user.js'
	export default {
		name: 'depositDetail',
		mixins: [loadMore],
		data() {
			return {
				showTime: false,
				isTapScan: false, // 是否可以正常扫码 （阻止用户同一时间点，多次点击）
				isBtn: null,
				deviceId: '',
				list: {
					actuallyPay: 0,
					agentId: "1000001950656231",
					batteryTypeName: "48",
					btStatus: 2,
					cardNo: null,
					createBy: null,
					createTime: null,
					ctime: "2023-12-01 16:41:59",
					deposit: 0.01,
					deviceAddress: "广东省广州市番禺区钟盛路112号",
					deviceId: "1000001217990444",
					deviceNo: "YH202310310024",
					deviceSn: null,
					deviceType: "10",
					etime: null,
					ftime: null,
					id: "1000001910483622",
					mealId: "1000000539026145",
					mealMoney: 11,
					mealName: "2",
					mealOrderNo: "EXC1000002001843611",
					mealRestNum: -1,
					mealTime: "2024-01-03 15:18:12",
					mealTotalNum: -1,
					newBatteryNo: "BT104803020BPLD210607659",
					newCabinetNo: 5,
					oldBatteryNo: null,
					oldCabinetNo: 2,
					openResult: 1,
					openType: 2,
					operatorId: "1000001950656231",
					orderNo: "ZD1000000216947869",
					overduePay: 0,
					overduePrice: 0,
					overdueTime: 0,
					params: {},
					payType: 0,
					phone: "15602338495",
					remark: null,
					remarks: null,
					rentTime: 0,
					searchValue: null,
					siteId: null,
					siteName: null,
					startTime: "2023-11-30 14:59:48",
					status: 3,
					stime: "2023-12-01 16:42:15",
					transactionNo: "",
					updateBy: null,
					updateTime: null,
					userId: "1000000951516227",
					userName: "东方大道",
				},
			}
		},
		onLoad(e) {
			this.deviceId = e.deviceId || ''
			console.log('3333333', e);
		},
		async onShow() {
			this.loadData()
			console.log('刷新=========');

		},
		methods: {
			// btn() {
			// 	this.routerLink({
			// 		path: '/pages/user/wallet/openDoorss',
			// 		query: {
			// 			list: JSON.stringify(this.list),
			// 		}
			// 	})
			// },
			returnTheBatteryFn() {
				// 防抖
				if (this.isTapScan) {
					return false
				}
				this.isTapScan = true
				setTimeout(() => {
					this.isTapScan = false
				}, 2000)
				const _self = this
				// 调起扫码接口
				uni.scanCode({
					scanType: ['barCode', 'qrCode'], //扫码类型
					// 扫码成功
					async success(res) {
						if (res.errMsg == 'scanCode:ok') {
							console.log('11111111', res);
							let deviceNo = ''
							let deviceType = 0
							if (res.scanType == 'QR') { //扫的码是二维码类型
								// http://weixin.qq.com/r/test?deviceNo=131211&deviceType=1
								// deviceType设备类型 1:换电柜 2：租车 3：充电柜
								// 获取路由url的参数值
								deviceNo = _self.getUrlParam('deviceNo', res.result)
								deviceType = _self.getUrlParam('deviceType', res.result)
								if (deviceType == 2 || deviceType == 3) {
									console.log('3333');
									_self.toast('请扫描正确的二维码！')
									return false
								}
								_self.$store.commit('scanCode', deviceType)
								if (deviceNo) {
									console.log('=======', deviceType, deviceNo);
									const resss = await deviceReturnOpenDoor({
										deviceNo: deviceNo,
										handlerType: 4, //3寄存电池 4押金退还电池
									})
									console.log('resss', resss);
									if (resss.code === 200) {
										console.log('押金退还电池请求成功');
										_self.routerLink({
											path: '/pages/user/wallet/openDoorss',
											query: {
												list: JSON.stringify(resss.data),
											}
										})

									} else {
										_self.toast(resss.msg || '归还失败')
									}

									// _self.routerLink({
									// 	path: '/pages/user/rentEle/batteryChange',
									// 	query: {
									// 		deviceId: _self.deviceId,
									// 		backFlag: 1,
									// 		isHandlerType: true,
									// 	}
									// })


								} else {
									_self.toast('扫码失败')
								}
							} else {

								_self.toast('请扫正确的二维码')
							}
						}

					},
					// 扫码失败
					fail(err) {
						_self.toast('扫码失败')
					}
				})
			},

			async loadData() {
				const res = await depositOrder({
					pageNum: this.page,
					pageSize: this.limit
				})
				this.showTime = true
				this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]
				this.isBtn = this.loadList[0].rent_status //电池租用状态，0 未归还(进行中)， 1 已归还(已完成) 2:退款中 3:已退款 
				this.pageLength = res.rows.length
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
			},
			// 提现
			async extractCashFn(item) {
				this.routerLink({
					path: '/pages/user/wallet/withdrawal',
					query: {
						money: item.money,
						id: item.id
					}
				})
			},
			// 查看订单
			goOrderList(item) {
				//  item.type == 1 ? '换电押金' : '租车押金'
				const activeTab = item.type == 1 ? 3 : 2
				this.routerLink({
					path: '/pages/user/myOrder/index',
					query: {
						activeTab
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.table_th {
		display: flex;
		word-wrap: break-word;
		background-color: #F4F4F5;

		.table_td {
			display: inline-block;
			width: 130upx;
			padding: 20upx 10upx;
		}
	}

	.table_w {
		.table_tr {
			display: flex;
			word-wrap: break-word;

			.table_td {
				display: inline-block;
				width: 130upx;
				padding: 20upx 10upx;
			}
		}

		.table_b {
			border-top: none;
		}

		.table_tr {
			border-bottom: 1px solid #e4e7ed;
			font-size: 24upx;
		}

		.table_tr:last-child {
			border: none;
		}
	}

	.btn-box {
		color: #fff;
		background-color: #3282FF;
		border-radius: 50rpx;
	}
</style>